<template>
  <div class="fly-header layui-bg-black">
    <div class="layui-container">
      <router-link class="fly-logo" to="/">
        <img src="../common/logo.png" alt="layui" />
      </router-link>
      <ul class="layui-nav fly-nav-user">
        <template v-if="!isLogin">
          <!-- 未登入的状态 -->
          <li class="layui-nav-item">
            <a class="iconfont icon-touxiang layui-hide-xs" href="/"></a>
          </li>
          <li class="layui-nav-item">
            <router-link to="/login">登入</router-link>
          </li>
          <li class="layui-nav-item">
            <router-link to="/reg">注册</router-link>
          </li>
        </template>
        <template v-else>
          <!-- 调整了Hover的区域 -->
          <li class="layui-nav-item" @mouseover="show()" @mouseleave="hide()">
            <router-link class="fly-nav-avatar" :to="{name: 'center'}">
              <cite class="layui-hide-xs">{{userInfo.name}}</cite>
              <!-- <i class="iconfont icon-renzheng layui-hide-xs" title="认证信息：layui 作者"></i> -->
              <i
                class="layui-badge fly-badge-vip layui-hide-xs"
                v-show="userInfo.isVip !== '0'"
              >VIP{{userInfo.isVip}}</i>
              <img :src="userInfo.pic" />
            </router-link>
            <dl
              class="layui-nav-child layui-anim layui-anim-upbit"
              :class="{'layui-show': isHover}"
            >
              <dd>
                <router-link :to="{name: 'home', params: {uid: userInfo._id}}">
                  <i class="layui-icon layui-icon-home"></i>我的主页
                </router-link>
              </dd>
              <dd>
                <router-link :to="{name: 'info'}">
                  <i class="layui-icon">&#xe620;</i>基本设置
                </router-link>
              </dd>
              <dd>
                <router-link :to="{name: 'msg'}">
                  <i class="iconfont icon-tongzhi" style="top: 4px;"></i>我的消息
                </router-link>
              </dd>
              <!-- <dd>
                <router-link :to="{name: 'home', params: {uid: userInfo._id}}">
                  <i class="layui-icon" style="margin-left: 2px; font-size: 22px;">&#xe68e;</i>我的主页
                </router-link>
              </dd>-->
              <hr style="margin: 5px 0;" />
              <dd>
                <a href="javascript: void(0)" style="text-align: center;" @click="logout()">退出</a>
              </dd>
            </dl>
          </li>
          <router-link class="fly-nav-msg" :to="{name: 'msg'}">
            <i class="layui-icon layui-icon-notice" style="font-size: 20px;"></i>
            <span class="layui-badge-dot" v-if="num.message > 0"></span>
          </router-link>
          <transition name="fade">
            <div class="layui-layer-tips" v-show="hasMsg">
              <div class="layui-layer-content">
                您有{{num.message}}条未读消息
                <i class="layui-layer-TipsG layui-layer-TipsB"></i>
              </div>
            </div>
          </transition>
        </template>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'imoocHeader',
  data() {
    return {
      isHover: false,
      hoverCtrl: '',
      hasMsg: false
    }
  },
  computed: {
    userInfo() {
      return (
        this.$store.state.userInfo || {
          isVip: '',
          name: '',
          pic: ''
        }
      )
    },
    ...mapGetters(['isLogin', 'num'])
  },
  watch: {
    num(newVal, oldVal) {
      if (
        newVal.event &&
        newVal.message !== oldVal.message &&
        newVal.message > 0
      ) {
        this.hasMsg = true
        setTimeout(() => {
          this.hasMsg = false
        }, 2000)
      }
    }
  },
  methods: {
    show() {
      clearTimeout(this.hoverCtrl)
      this.hoverCtrl = setTimeout(() => {
        this.isHover = true
      }, 200)
    },
    hide() {
      clearTimeout(this.hoverCtrl)
      this.hoverCtrl = setTimeout(() => {
        this.isHover = false
      }, 200)
    },
    /**
     * 退出逻辑
     * 清空缓存 token userInfo isLogin
     * 跳转到首页
     */
    logout() {
      this.$confirm(
        '您确定要退出吗？',
        () => {
          localStorage.clear()
          this.setToken('')
          this.setUserInfo({})
          this.setIsLogin(false)
          this.$router.push({ name: 'index' }, () => {})
        },
        () => {}
      )
    },
    // 将store中的映射到当前组件实例
    ...mapMutations({
      setToken: 'SET_TOKEN',
      setUserInfo: 'SET_USER_INFO',
      setIsLogin: 'SET_ISLOGIN'
    })
  }
}
</script>

<style lang="scss" scoped>
.fly-logo {
  left: -15px;
  top: 0px;
  margin-left: 15px;
}
.layui-layer-tips {
  position: absolute;
  white-space: nowrap;
  right: 0;
  top: 60px;
  z-index: 2000;
}
.layui-nav .layui-badge-dot {
  position: absolute;
  top: 50%;
  margin: -14px 0 0 -6px;
}
.fly-nav-msg {
  background: transparent;
}
</style>
